<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" ref="buttondiv">
          <div class="search-title">样本库</div>
          <el-select v-model="selLibrid" filterable style="width:180px" @change="btnQuery" clearable ref="selLibrid">
              <el-option v-for="(item, index) in selSmpLibrary_Options" :key="index" :value="item.librid" :label="item.librname"></el-option>
          </el-select>
          <div style="white-space: nowrap;font-size: 12px;color:red">
              &nbsp;&nbsp;&nbsp;&nbsp;提示:双击左,右侧表格中的一行可实现取消归类，归类。
          </div>
          <div class="top-deal">
              <el-button @click="btnQuery()" icon="el-icon-search" v-has="'PINQUERY'" type="primary">查询</el-button>
          </div>
      </div>
      <div class="pagecenter">
          <rm-layout-right movingcolor="#CCFFFF" :splitwidth=5 :fixsize=370 >
              <div class="pagecenter-top" ref="lButtondiv">
                  <table>
                      <tr>
                          <td style="white-space: nowrap;color:blue;font-size:13px">
                              当前项目
                          </td>
                          <td>
                              <el-input v-model.trim="txtSearch" @input="btnQuery()" placeholder="架子类型代码|名称" style="width:180px"></el-input>
                          </td>
                          <td :width="lButtonWidth"></td>
                          <td>
                              <el-checkbox style="color:red" v-model="editSeq" true-label="1" false-label="0" @change="EditSeq($event)">手动输入序号</el-checkbox>
                          </td>
                          <td>
                              <el-button icon="el-icon-top" @click="btnRowTop()" :disabled="isabled">首位</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-top-right" @click="btnRowUp()" :disabled="isabled">上移</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-bottom-right" @click="btnRowDown()" :disabled="isabled">下移</el-button>
                          </td>
                          <td>
                              <el-button icon="el-icon-bottom" @click="btnRowUpBottom()" :disabled="isabled">末位</el-button>
                          </td>
                          <td>
                              <!-- <el-button style="width:85px;height:28px;" @click="btnSaveSeq" icon="el-icon-document">保存序号</el-button> -->
                              <el-button style="width:85px;height:28px;" @click="btnSaveSeq" icon="el-icon-document">保存</el-button>
                          </td>
                      </tr>
                  </table>
              </div>
               <div class="pagecenter-bottom">
                  <vxe-table :loading="lLoading" :data.sync="leftTableData" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row ref="lxTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe :sort-config="{trigger: 'cell'}" row-id="Rowid" :row-class-name="rowSmpType"  :select-config="{checkRowKeys:tableSelect, trigger: 'cell'}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}" :mouse-config="{selected: true}" @current-change="lCurrentChange" @cell-dblclick="DblDel"  showIcon:false :cell-class-name="CellClassName" >
                      <vxe-table-column align="center" field="seq" title="序号" width="80"  ></vxe-table-column>
                      <vxe-table-column field="specimen_name" title="样本类型名称" width="150"></vxe-table-column>
                      <vxe-table-column field="specimen_code" title="样本类型代码" width="150"></vxe-table-column>
                      <vxe-table-column field="quantity" title="留样份数" width="100" :edit-render="{name:'input'} " header-align="center" align="left" ></vxe-table-column>
                      <vxe-table-column field="volume" title="单份留样量" width="100" :edit-render="{name:'input'} " header-align="center" align="left" ></vxe-table-column>
                      <vxe-table-column field="unit" title="容量单位" width="100" :edit-render="{name:'input'} " header-align="center" align="left" ></vxe-table-column>
                      <vxe-table-column field="librid" title="标本库ID" width="100" header-align="center" align="left"></vxe-table-column>
                  </vxe-table>
              </div>
              <template v-slot:fix>
                  <div class="pagecenter-top" ref="rButtondiv">
                      <table style="font-size:13px">
                          <tr>
                              <td style="white-space: nowrap;color:red;padding:3px 0px 0px 0px">
                                  待归类项目
                              </td>
                              <td :width="rButtonWidth"></td>
                              <td>
                                  <el-input v-model.trim="txtAllSearch" @input="AllQuery()" placeholder="样本类型名称|样本类型代码|序号|拼音码" style="width:250px"></el-input>
                              </td>
                          </tr>
                      </table>
                  </div>
                  <div class="pagecenter-bottom">
                      <vxe-table :loading="rLoading" :data.sync="rightTableData" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row ref="rxTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe :row-class-name="RowClassName" @current-change="rCurrentChange" @cell-dblclick="DblAdd">
                          <vxe-table-column field="specimen_name" title="样本类型名称" width="150"></vxe-table-column>
                          <vxe-table-column field="specimen_code" title="样本类型代码" width="150"></vxe-table-column>
                          <vxe-table-column field="inputcode" title="拼音码" width="150"></vxe-table-column>
                      </vxe-table>
                  </div>
              </template>
          </rm-layout-right>
      </div>
  </div>
</template>

<script type="text/javascript">
export default {
  ttest:[],
  name: "SMP110",
  data() {
      return {
          lLoading: false,
          rLoading: false,
          changeFlag: false,
          ifCanEditFlag: false,
          isabled: false,
          iseditseq: false,
          lTempindex: 0,
          rTempindex: 0,
          selflag: 0,
          editSeq: "0", //序号编辑标志
          lButtonWidth: "",
          rButtonWidth: "",
          txtSearch: "", //查询内容（对 标本库代码、名称进行模糊查询）
          txtAllSearch: "", //查询标本类型库
          selLibrid: "", //标本库ID
          inputmdl: "",
          actionindex: "M", //M默认 A新增 E修改 D删除
          dayNow: "", //当前时间 用于创建
          specimen_code: "",
          specimen_name: "",
          lDataRow: {},
          rDataRow: {},
          itemArr: [],
          leftTableData: [],
          rightTableData: [],
          selSmpLibrary_Options: [], //标本库类型
          tableSelect:[]   //样本类型✔
      }
  },
  watch: {},
  created() {
      this.ddlSmp_Library()
  },
  mounted() {},
  updated() {
      this.GetButtonWidth()
  },
  methods: {
      /*-----------------------------初始化-----------------------------*/
      //标本库列表下拉框初始化
      ddlSmp_Library() {
          this.$tool
              .request({
                  url: "SMP/SMP1/SMP130",
                  method: "post",
                  data: {
                      action: "q_smp_library",
                  },
              })
              .then((res) => {
                  this.selSmpLibrary_Options = res
                  if(this.selSmpLibrary_Options.length>0)
                  {
                      this.selLibrid = this.selSmpLibrary_Options[0].librid
                      this.btnQuery() //初始化主列表
                      this.AllQuery() //初始化类型表
                  }
              })
      },
      GetButtonWidth() {
          if (this.$refs.buttondiv) {
              this.lButtonWidth = this.$refs.lButtondiv.offsetWidth + "px"
              this.rButtonWidth = this.$refs.rButtondiv.offsetWidth + "px"
          }
      },
      /*-----------------------------行改变-----------------------------*/
      //左 行选中
      lCurrentChange({ row, $rowIndex }) {
          this.lCurrentChangeEvent(row, $rowIndex)
      },
      lCurrentChangeEvent(row, $rowIndex) {
          this.lDataRow = row
          this.lTempindex = $rowIndex
      },
      //右 行选中
      rCurrentChange({ row, $rowIndex }) {
          this.rDataRow = row
          this.rTempindex = $rowIndex
          this.rCurrentChangeEvent()
      },
      async rCurrentChangeEvent(row, $rowIndex) {},
      /*-----------------------------按钮类-----------------------------*/
      async btnQuery() {
          this.itemArr = []
          this.lLoading = true
          console.log('🚀我时keystr: ',this.txtSearch);
          try {
              const res = await this.$tool.request({
                  url: "SMP/SMP1/SMP110",
                  method: "post",
                  data: {
                      action: "smp_smptype_query",
                      keystr: this.txtSearch,
                      librid: this.selLibrid,
                  },
              })
              this.leftTableData = res.RData.Data
              this.lLoading = false
              this.changeFlag = false

              this.$nextTick(() => {
              this.initCheckRow();
                      });

          } catch (e) {
              this.$message.warning(e)
              this.lLoading = false
          }
      },
      async AllQuery() {
          this.rLoading = true
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS1/LIS112",
                  method: "post",
                  data: {
                      action: "q_specimen",
                      qcode: this.txtAllSearch,
                  },
              })
              this.rightTableData = res
              this.changeFlag = false
              this.rLoading = false
          } catch (e) {
              this.$message.warning(e)
              this.rLoading = false
          }
      },
      async DblAdd({ row }) {
          if (this.selLibrid == "") {
              this.$refs.selLibrid.focus()
          }
          let allData = this.$refs.lxTable.tableData
          let flag = false
          let tempSeq = (this.$refs.lxTable.tableData.length + 1) * 10
          if (allData.length > 0) {
              allData.forEach((item) => {
                  if (item.specimen_code == row.specimen_code) {
                      flag = true
                  }
              })
          }
          if (flag == false) {
              let pushData = {
                  seq: tempSeq,
                  specimen_code: this.rDataRow.specimen_code,
                  specimen_name: this.rDataRow.specimen_name,
                  librid: this.selLibrid,
                  quantity:2,
                  volume:1.2,
                  unit:'ml'
              }
              this.$refs.lxTable.insert(pushData).then(({ row }) => {
                  this.$refs.lxTable.setCurrentRow(row)
                  this.$refs.lxTable.scrollToRow(row)
                  this.itemArr.push(row.specimen_code)
              })
          }
          try {
              const res = await this.$tool.request({
                  url: "SMP/SMP1/SMP110",
                  method: "post",
                  data: {
                      action: "smp_smptype_add",
                      librid: this.selLibrid,
                      specimen_code: this.rDataRow.specimen_code,
                      seq: tempSeq,
                      quantity:2,
                      volume:1.2,
                      unit:'ml'

                  },
              })
              if (res == "样本类型已存在") {
                  this.$message({
                      message: "该样本类型已存在。",
                      type: "warning",
                  })
              }
              if (res == "样本库ID为空") {
                  this.$message({
                      message: "进行项目归类前请您先选择对应样本库。",
                      type: "warning",
                  })
                  this.$refs.selLibrid.focus()
              }
          } catch (e) {
              this.$message.warning(e)
          }
      },
      async DblDel({ row }) {
          if (this.selLibrid == "") {
              this.$message({
                  message: "取消项目归类前请您先选择对应样本库。",
                  type: "warning",
              })
              this.$refs.selLibrid.focus()
          } else {
              var delrow = this.$refs.lxTable.getCurrentRow()
              if (delrow) {
                  var alld =  this.$refs.lxTable.tableData;
                  var rowindex = alld.indexOf(delrow);
                  this.$refs.lxTable.remove(delrow);
                  let havedata = this.$refs.lxTable.getTableData().fullData
                   if (havedata.length > 0) {
                      if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                      let selectrow = havedata[rowindex];
                      this.$refs.lxTable.setCurrentRow(selectrow);
                  }
              } else {
                  this.$message({
                      message: "请先选中要删除的明细！",
                      type: "warning",
                  })
              }
              try {
                  const res = await this.$tool.request({
                      url: "SMP/SMP1/SMP110",
                      method: "post",
                      data: {
                          action: "smp_smptype_delete",
                          specimen_code: row.specimen_code,
                          librid: this.selLibrid,
                      },
                  })
              } catch (e) {
                  this.$message.error(e)
              }
          }
      },
      LibridMsg() {
          this.$message({
              message: "样本库ID不可为空",
              type: "warning",
          })
          this.$refs.selLibrid.focus()
      },
      //手工输入编号
      EditSeq(flag) {
          if (flag == "0") {
              this.isabled = false
              this.iseditseq = false
          } else {
              this.isabled = true
              this.iseditseq = true
              if (this.$refs.lxTable.getTableData().fullData.length > 0) {
                  this.$refs.lxTable.setActiveCell(
                      this.$refs.lxTable.getTableData().fullData,
                      "seq"
                  )
              }
          }
      },
      IsEditSeq({ row, columnIndex }) {
          if (columnIndex == "0") {
              if (this.iseditseq) {
                  return true
              } else {
                  return false
              }
          } else {
              return true
          }
      },
      //上移
      btnRowUp() {
          if (this.selLibrid != "") {
              if (this.lTempindex > 0) {
                  let upData = this.$refs.lxTable.tableData[
                      this.lTempindex - 1
                  ]
                  let currentrow = this.$refs.lxTable.tableData[
                      this.lTempindex
                  ]
                  this.$refs.lxTable.tableData.splice(this.lTempindex - 1, 1)
                  this.$refs.lxTable.tableData.splice(
                      this.lTempindex,
                      0,
                      upData
                  )
                  this.lTempindex = this.lTempindex - 1
                  this.$nextTick(() => {
                      this.$refs.lxTable.setCurrentRow(currentrow)
                  })
              }
          } else {
              this.LibridMsg()
          }
      },
      //下移
      btnRowDown() {
          if (this.selLibrid != "") {
              if (
                  this.lTempindex <
                  this.$refs.lxTable.tableData.length - 1
              ) {
                  let downData = this.$refs.lxTable.tableData[
                      this.lTempindex + 1
                  ]
                  let currentrow = this.$refs.lxTable.tableData[
                      this.lTempindex
                  ]
                  this.$refs.lxTable.tableData.splice(this.lTempindex + 1, 1)
                  this.$refs.lxTable.tableData.splice(
                      this.lTempindex,
                      0,
                      downData
                  )
                  this.lTempindex = this.lTempindex + 1
                  this.$nextTick(() => {
                      this.$refs.lxTable.setCurrentRow(currentrow)
                  })
              }
          } else {
              this.LibridMsg()
          }
      },
      //首位
      btnRowTop() {
          if (this.selLibrid != "") {
              if (this.lTempindex > 0) {
                  let topData = this.$refs.lxTable.tableData[this.lTempindex]
                  this.$refs.lxTable.tableData.splice(this.lTempindex, 1)
                  this.$refs.lxTable.tableData.splice(0, 0, topData)
                  this.lTempindex = 0
                  this.$nextTick(() => {
                      this.$refs.lxTable.setCurrentRow(topData)
                  })
                  this.GetTopRow_SaveSeq()
              }
          } else {
              this.LibridMsg()
          }
      },
      //末位
      btnRowUpBottom() {
          if (this.selLibrid != "") {
              if (
                  this.lTempindex <
                  this.$refs.lxTable.tableData.length - 1
              ) {
                  let bottomData = this.$refs.lxTable.tableData[
                      this.lTempindex
                  ]
                  this.$refs.lxTable.tableData.splice(this.lTempindex, 1)
                  this.$refs.lxTable.tableData.splice(
                      this.$refs.lxTable.tableData.length,
                      0,
                      bottomData
                  )
                  this.lTempindex = this.$refs.lxTable.tableData.length - 1
                  this.$nextTick(() => {
                      this.$refs.lxTable.setCurrentRow(bottomData)
                  })
                  this.GetButtonRow_SaveSeq()
              }
          } else {
              this.LibridMsg()
          }
      },
      //首行滚动选中
      GetTopRow_SaveSeq() {
          this.$nextTick(() => {
              let toTop = this.$refs.lxTable.tableData[0]
              this.$refs.lxTable.scrollToRow(toTop)
          })
      },
      //尾行滚动选中
      GetButtonRow_SaveSeq() {
          this.$nextTick(() => {
              var alldataLen = this.$refs.lxTable.tableData.length
              let toButton = this.$refs.lxTable.tableData[alldataLen - 1]
              this.$refs.lxTable.scrollToRow(toButton)
          })
      },
      //绑定Vxe-table勾选框
      LoadCheckbox({row})
      {
          if (row.sel=='1') {
              return true;
          }
          else
          {
              return false;
          }
      },
      //加载checkbox 列
      initCheckRow()
      {
          //获取vxe table data
          let tempdata =  this.$refs.lxTable.getData();
          // tempdata.forEach(item=>{
          //     if (item.sel==='1') {
          //         this.tableSelect.push(item.Rowid);
          //     }
          // });
          let TselectArray = this.tableSelect;
             tempdata.forEach(function(item,index,array)
             {
                 //添加样本库对应的样本类型
                  if (item.sel=='1') {
                      //不存在样本类型就新增样本类型
                     if (TselectArray.indexOf(item.Rowid)==-1) {
                         TselectArray.push(item.Rowid);
                     }
                  }
             });
          return this.tableSelect=TselectArray
          // let
          // return row.Rowid
      },
      //选中所有
      selectAllEvent({ selection,checked,row,rowIndex,$rowIndex,column,columnIndex,$columnIndex,cell })
      {;
          console.log('选中所有 selectAllEvent')
          console.log('我是checked:',checked);
          console.log('我是row:',row);
          console.log('我是rowindex:',rowIndex);
          // console.log(this.leftTableData);
      },
      //选中一行
      selectRowEvent({selection,checked,row,rowIndex,$rowIndex,column,columnIndex,$columnIndex,cell },event)
      {;
          //当前样本类型绑定到样本库
          // if (checked) {
          //     this.leftTableData[rowindex].sel='1';
          // }
          // else
          // {
          //     this.leftTableData[rowindex].sel='0';
          // }
          // console.clear();

          // console.log('我是selection :',selection );
          // console.log('我是checked:',checked);
          // console.log('我是row:',row);
          // console.log('我是rowindex:',rowIndex);
          // console.log('我是 $rowIndex:',$rowIndex );
          // console.log('我是 column:',column );
          // console.log('我是 columnIndex:',columnIndex);
          // console.log('我是 $columnIndex:',$columnIndex );
          // console.log('我是 cell:',cell );
          // console.log('event:',event);
          // console.log(this.leftTableData[rowindex]);
      },
      //rowSmpType
      rowSmpType({row})
      {
          // console.log("TEST GO GO GO :",this.testtemp)
          // console.log('我是LOAD ROW:',row);
          return {
              //待定义样式
            }
      },
      //保存序号
      btnSaveSeq() {
          if (this.selLibrid != "") {
              let tempseq = 0
              let temptabledata = []
              let temprowdata = {}
              let sSeqTD = this.$refs.lxTable.tableData
              if (this.isabled) {
                  sSeqTD.sort((a, b) => {
                      let seq1 = a.seq
                      let seq2 = b.seq
                      return a.seq - b.seq
                  })
              }
              for (let i = 0, len = sSeqTD.length; i < len; i++) {
                  let temprowdata = {}
                  tempseq = (i + 1) * 10
                  temprowdata.seq = tempseq
                  temprowdata.smptype = sSeqTD[i].specimen_code
                  temprowdata.librid = sSeqTD[i].librid
                  temprowdata.quantity = sSeqTD[i].quantity
                  temprowdata.volume = sSeqTD[i].volume
                  temprowdata.unit = sSeqTD[i].unit
                  temptabledata.push(temprowdata)
                  if (tempseq !== sSeqTD[i].seq) {
                      sSeqTD[i].seq = tempseq
                  }
              }
              this.$tool
                  .request({
                      url: "SMP/SMP1/SMP110",
                      method: "post",
                      data: {
                          action: "smp_smptype_edit",
                          seq: temptabledata,
                      },
                  })
                  .then((response) => {
                      if (response == "1") {
                          this.$message({
                              message: "操作成功！",
                              type: "success",
                          })
                          this.firstquery = true
                          this.btnQuery()
                      } else {
                          this.$message({
                              message: "保存失败！" + response,
                              type: "warning",
                          })
                      }
                  })
          } else {
              this.LibridMsg()
          }
      },
      /*------------------------------Class------------------------------*/
      //左侧表格 序号
      CellClassName({ column }) {
          if (column.property == "seq" && !this.iseditseq) {
              return "col-gray"
          }
      },
      //右侧表格 已选择过的项目
      RowClassName({ row, rowIndex }) {
          // if (this.itemArr.indexOf(row.specimen_code) > -1) {
          //     return "rm-disable"
          // }
          // if (element.specimen_code == row.specimen_code) {
          //     return "rm-disable"
          // }
      },
  },
}
</script>

<style scoped>
.search-title {
  margin: 0 5px 0 19px;
  font-size: 13px;
}
.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}
.pagetop {
  width: 100%;
  height: 38px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  white-space: nowrap;
}
.pagecenter {
  position: absolute;
  border: 1px solid #ccc;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
.pagecenter-top {
  position: absolute;
  height: 35px;
  width: 100%;
  right: 0px;
}
.pagecenter-bottom {
  position: absolute;
  top: 37px;
  width: 100%;
  right: 0px;
  bottom: 0px;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
::v-deep  .vxe-table .vxe-body--column.col-orange {
  /* background-color: #f8f8f8; */
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 5px;
}
::v-deep .el-input {
  padding-right: 5px;
}
::v-deep  tr.vxe-body--row.row-add {
  color: #000000;
  font-weight: bold;
}
::v-deep  tr.vxe-body--row.row--current {
  color: #000000;
  font-weight: bold;
}
::v-deep  .body {
  background-color: #000000 !important;
}
::v-deep  .vxe-table .vxe-body--column.col-gray {
  background-color: #f8f8f8;
}
</style>
